<!-- PostDetailPage.vue 文章详情页 -->
<script setup>
import UserLayout from "./UserLayout.vue";
import { ref } from 'vue';
import PostItem from "@/components/PostItem.vue";
import {getMyPostService} from "@/api/post.js";

const posts = ref([
  {
    id: 1,
    author: {
      id:1 ,
      avatar: '',
      name: '',
      introduced: ''
    },
    title: "",
    content: "",
    cover: '',
    tags: [],
    likeCount: 0,
  },
])

const getPosts = async () => {
  const res = await getMyPostService()
  posts.value = res.data.data
}
getPosts()
// 处理点赞
const handleLike = ({id, liked}) => {
  const post = posts.value.find(p => p.id === id)
  if (post) {
    post.likes += liked ? 1 : -1
    post.liked = liked
  }
}

// 切换展开状态
const toggleExpand = (postId) => {
  const post = posts.value.find(p => p.id === postId)
  if (post) post.expanded = !post.expanded
}
</script>

<template>
  <UserLayout>
    <!-- 文章详情内容 -->
    <PostItem
      v-for="post in posts"
      :key="post.id"
      :post="post"
      @like="handleLike"
      @toggle-expand="toggleExpand"
    />
  </UserLayout>
</template>
